<template>
	<view>
		<view class="top">
			<image src="/static/image/bannerImg.png" @click="toUrl('/pages/index')" mode="widthFix"></image>
		</view>
		<view class='right'>
			<view class="main">
				<view class="qrBox">
					<image :src="loginCode"></image>
					<view class="mark" v-if="hideCode">请在App中授权登录</view>
					<view class="qrTip">请使用翼宝商城APP扫码登录</view>
					<view class="qrBtn">重新扫码</view>
					<view class="qrDown" @click='hiddenQrcode = false'>
						<image src="../../../static/image/common/logo.png"></image>翼宝商城APP下载
					</view>
					<view class="qrLine"></view>
				</view>
				<view class="loginBox">
					<view class="tipwapr">翼宝商城不会以任何理由和形式要求您转账，谨防诈骗</view>
					<view class="box">
						<view class="tit" v-text="loginType==0?'账号登录':'验证码登录'"></view>
						<view class="inputBox">
							<view class="phone_left">+86</view>
							<view class="input">
								<u-input v-model="phone" placeholder='请输入手机号码' :height='80' />
							</view>
						</view>
						<view class="inputBox" v-if="loginType==0">
							<view class="password">
								<u-input v-model="password" type='password' placeholder='请输入密码' :height='80' />
							</view>
						</view>
						<view class="inputBox" v-if="loginType==1">
							<view class="code">
								<u-input v-model="code" placeholder='请输入6位验证码' :height='80' />
							</view>
							<view class="phone_right" @click="checkPhone"><text>{{btntxt}}</text></view>
						</view>
						<view class="tip">
							<image src="../../../static/image/common/check_on.png" v-if="check"
								@click=" check = false">
							</image>
							<image src="../../../static/image/common/check.png" v-else @click="show = true"></image>
							<view style="width: calc(100% - 20px);">
								我已阅读并同意
								<text>《{{infoList.title}}》</text>,
								并授权翼宝商城使用该账号信息(如昵称、头像)进行统一管理
							</view>
						</view>
						<view class="btnBox" @click="checkLogin">立即登录</view>
						<view class="chooseBox" @click="loginType = 1" v-if="loginType==0">验证码登录<view class="chooseText" @click.native.stop="showType = 1">账号注册</view></view>
						<view class="chooseBox" @click="loginType = 0" v-else>密码登录<view class="chooseText" @click.native.stop="showType = 1">账号注册</view></view>
						
					</view>
				</view>
				
			</view>
		
		</view>
		<u-popup v-model="show" mode="center">
			<view class='popBox'>
				<scroll-view :scroll-y="true" class="popScroll">
					<view class="info">
						<u-parse :html="showContent | formatRichText"></u-parse>
					</view>
				</scroll-view>
				<view class="btn" @click="read">同意</view>
			</view>
		</u-popup>
		
		<zw-dialog :hidden="hiddenQrcode" :title="'App下载'" :width="370" :height="400" @close="hiddenQrcode = true">
			<view class="qrcode-wrapper">
				<view class="qrcode-wrap">
					<image class="qrcode" src="../../../static/image/common/qrcode.png" mode="aspectFit"></image>
				</view>
				<view class="tips">
					<view>手机扫一扫</view>
					<view>下载App</view>
				</view>
			</view>
		</zw-dialog>
	</view>
</template>

<script>
	import {
		setAccToken,
		setRefToken,
		getRefToken
	} from '../../../userToken.js'
	import {
		encryptBase64,
		encryptWithAes,
		generateAesKey,
		decryptWithAes,
		decryptBase64
	} from '@/utils/crypto';
	import {
		encrypt,
		decrypt
	} from '@/utils/jsencrypt';
	export default {
		data() {
			return {
				show: false,
				clearPhone: '',
				phone: '',
				password: '',
				code: '',
				infoList: '',
				check: false,
				showContent: '',
				btntxt: '获取验证码',
				seconds: 60,
				disabled: false,
				loginType: 0, //0密码登录 1验证码登录
				timer: null,
				claerTimer: null,
				showClear: false,
				loginCode: '',
				uuid: '',
				msgData: {},
				hideCode:false,
				hiddenQrcode: true
			}
		},
		onLoad(e) {
			this.getInfoList()
			this.init()
		},
		methods: {
			init(){
				uni.request({
					url: this.serverUrl + '/user/information/list',
					method: 'GET',
					header: {
						'webuuid': encrypt(this.pageTenantId)
					},
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							var footerInfo = res.data.data[0]
							uni.setStorageSync('footerInfo', footerInfo)
						} 
					}
				})
			},
			toUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			read() {
				this.check = true;
				this.show = false;
			},
			//检验登录方式
			checkLogin() {
				if (!this.check) {
					this.show = true;
					return
				}
				if (this.loginType == 0) {
					this.getPwdLogin()
				} else {
					this.getCodeLogin()
				}
			},
			//发送验证码
			checkPhone() {
				var that = this;
				if (!that.check) {
					that.show = true;
					return;
				}
				if (that.disabled) {
					return
				}
				if (!that.phone) {
					uni.showToast({
						title: '请填写手机号码',
						icon: "none"
					});
					return false;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(that.phone))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				uni.showLoading({
					mask: true,
					title: '验证码发送中'
				})
				var url = that.serverUrl + "/user/userLogin/getValidateCode";
				uni.request({
					url: url,
					method: 'POST',
					data: {
						phone: that.phone
					},
					success: (res) => {
						uni.hideLoading()
						if (res.data.code == 0 || res.data.code == 200) {
							if (that.phone) {
								uni.showToast({
									title: '验证码已发送',
									icon: "none"
								});
								that.btntxt = that.seconds + '秒后再试';
								that.seconds--;
								that.disabled = true;
								that.timer = setInterval(() => {
									that.btntxt = that.seconds + '秒后再试';
									that.seconds--;
									that.disabled = true;
									if (that.seconds === 0) {
										clearInterval(that.timer);
										that.btntxt = '获取验证码';
										that.seconds = 60;
										that.disabled = false;
									}
								}, 1000);

							}
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			//密码登录
			getPwdLogin() {
				if (!this.phone) {
					uni.showToast({
						title: '请填写手机号码',
						icon: "none"
					});
					return false;
				}
				if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.phone))) {
					uni.showToast({
						title: '请填写正确手机号码',
						icon: "none"
					});
					return false;
				}
				if (!this.password) {
					uni.showToast({
						icon: 'none',
						title: '请填写密码'
					})
					return false;
				}
				
				const aesKey = generateAesKey();
				var data = {
					tenantId:this.pageTenantId,
					username:this.phone,
					password:this.password,
					clientId:"383c41953b35476defd109ac92a82ad6",
					grantType:"password"
				};
				uni.showLoading({
					title: '登录中',
					mask: true
				})
				uni.request({
					url: this.serverUrl + "/auth/loginPc",
					data: data,
					method: 'POST',
					header: {
						'isencrypt': true,
						'content-language':'zh_CN'
					},
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							uni.showToast({
								title: '登录成功',
								icon: "none"
							})
							setAccToken(res.data.data.access_token)
							setRefToken(res.data.data.refreshToken)
							var userInfo = res.data.data;
							var that = this;
							uni.setStorageSync('userInfo', userInfo)
							this.getUserInfoUpd()
							setTimeout(function() {
								uni.hideLoading();
								uni.reLaunch({
									url: '/pages/index'
								});
							}, 500);

						} else {
							uni.hideLoading();
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},
			//获取购物车
			getNum() {
				this.uni_request({
					url: '/user/cart/number',
					method: 'POST',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							this.resetSetItem('sellerCartNum', res.data.data);
						} else {
							uni.showToast({
								icon: "none",
								title: res.data.msg
							})
						}
					}
				})
			},
			//个人信息
			getUserInfoUpd() {
				var userInfoUpd = {}
				this.uni_request({
					url: '/user/info',
					method: 'GET',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							userInfoUpd.nickName = res.data.data.nickName;
							userInfoUpd.headImg = res.data.data.headImg;
							uni.setStorageSync('userInfo', res.data.data)
							this.resetSetItemUser('userInfoUpd', JSON.stringify(userInfoUpd));
						} else {
							uni.showToast({
								icon: "none",
								title: res.data.msg
							})
						}
					}
				})
			},
			//验证码登录
			getCodeLogin() {
				uni.showLoading({
					title: '登录中',
					mask: true
				})
				uni.request({
					url: this.serverUrl + "/user/userLogin/login",
					data: {
						phone: this.phone,
						validateCode: this.code
					},
					method: 'POST',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							uni.showToast({
								title: '登录成功',
								icon: "none"
							})
							this.getNum()
							this.getUserInfoUpd()
							setAccToken(res.data.data.access_token)
							setRefToken(res.data.data.refreshToken)
							var userInfo = res.data.data;
							var that = this;
							setTimeout(function() {
								uni.hideLoading();
								uni.reLaunch({
									url: '/pages/index'
								});
							}, 500);

						} else {
							uni.hideLoading();
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						}
					}
				})
			},


			getInfoList() {
				uni.request({
					url: this.serverUrl + '/articles/userAgreement',
					method: 'Get',
					header:{
						'webuuid': encrypt(this.pageTenantId)
					},
					success: (res) => {
						if (res.data.code == 200 || res.data.code == 0) {
							this.infoList = res.data.data[0];
							this.showContent = this.infoList.content;
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg
							})
						}
					}
				})

			},



		},
		filters: {
			/**
			 * 处理富文本里的图片宽度自适应
			 * 1.去掉img标签里的style、width、height属性
			 * 2.img标签添加style属性：max-width:100%;height:auto
			 * 3.修改所有style里的width属性为max-width:100%
			 * 4.去掉<br/>标签
			 * @param html
			 * @returns {void|string|*}
			 */
			formatRichText(html) {
				if (!html) return;
				//控制图片大小
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:block;margin:10rpx auto;"');
				return newContent;
			}
		}
	}
</script>
<style lang="scss">
	.right{
		@extend %flex-align-center;
		width: 1000px;margin: 0 auto;
	}
	.qrBox {
		height: 450px;
		z-index: 9;
		width: 400px;
		padding: 35px 20px 0 20px;
		@extend %flex-align-center;
		flex-direction: column;
		justify-content: center;
		background: #fff;position: relative;
		image {
			width: 200px !important;
			height: 200px;
		}
		.qrLine{position: absolute;top: 100px;right: 0;width: 1px;height: 1px;background: #BFBFBF;height: 250px;}
		.mark {
			height: 200px;
			width: 200px;
			background: rgba(255, 255, 255, 0.9);
			position: absolute;
			top: 181px;
			@extend %flex-align-center;
			justify-content: center;
		}

		.qrTip {
			color: #717171;
			margin: 30px 0 10px 0;
		}

		.qrBtn {
			color: #717171;
			margin-bottom: 10px;
			cursor: pointer;
		}

		.qrDown {
			@extend %flex-align-center;
			justify-content: center;
			padding: 5px;
			width: 200px;
			cursor: pointer;
			background: rgb(245, 245, 245);

			image {
				width: 25px !important;
				height: 25px;
				border-radius: 5px;
				margin-right: 5px;
			}
		}

		.qrBtn:hover {
			color: $color-primary;
		}

		.qrDown:hover {
			color: $color-primary;
		}
	}

	.popBox {
		height: 80vh;
		width: 800px;
		padding: 10px;
		@extend %flex-align-center;
		flex-direction: column;
		.popScroll {
			height: 660px;
		}

		.info {
			display: inline-block;
			padding: 20px;
		}

		.btn {
			width: 150px;
			background: $color-primary;
			color: #fff;
			@extend %flex-align-center;
			justify-content: center;
			height: 40px;
			margin-top: 12px;
			border-radius: 5px;
			font-size: 16px;
			cursor: pointer;
		}
	}

	.top {
		width: 1000px;
		margin: 0 auto;
		height: 115px;
		display: flex;
		@extend %flex-align-center;
		justify-content: flex-start;
		image {
			width: 180px;
			cursor: pointer;
		}
	}
	.main {
		width: 100%;
		position: relative;
		height: 650px;
		overflow: hidden;
		@extend %flex-align-center;
		.loginBox {
			height: 450px;
			z-index: 9;
			border-radius: 10px;
			width: 600px;
			background: #fff;
			position: relative;
			.tipwapr{
				background: #FFF5CC;font-size: 12px;
				padding: 8px;width: 330px;display: inline-block;
				text-align: center; color: #994D00;
				border-radius: 4px;vertical-align: middle;
				position: absolute;right: 0px;top: 0px;
			}
			.box {
				@extend %flex-align-center;
				height: 450px;
				flex-direction: column;
				justify-content: center;
				.tit {
					@extend %flex-align-center;
					justify-content: center;
					margin: 30px 0 30px 0;
					font-size: 22px;color: $color-primary;
					font-weight: bold;
				}
				.inputBox {
					@extend %flex-align-center;
					justify-content: center;
					border: none !important;
					width: 400px;
					margin: 0 auto;
					height: 48px;
					margin-bottom: 20px;
					background: #F7F8FC;
					border-radius: 10px;
					.phone_left {
						width: 70px;
						height: 40px;
						@extend %flex-align-center;
						justify-content: center;
						border-right: 1px solid #ddd;
						color: #717171;
					}

					.input {
						width: 330px;
						height: 40px;
						@extend %flex-align-center;
						justify-content: center;
						padding: 0 15px;
					}

					.phone_right {
						width: 150px;
						height: 40px;
						@extend %flex-align-center;
						justify-content: center;
						border-left: 1px solid #ddd;
						color: $color-primary;

						text {
							cursor: pointer;
						}
					}

					.password {
						width: 360px;
						height: 40px;
						@extend %flex-align-center;
						justify-content: center;
					}

					.code {
						width: 250px;
						@extend %flex-align-center;
						justify-content: center;
						padding: 0 15px;
					}
				}

				.tip {
					width: 400px;
					margin: 0 auto;
					color: #999;
					display: flex;
					align-items: flex-start;
					image {
						width: 15px;
						height: 15px;
						margin-right: 3px;
						margin-top: 2px;
						cursor: pointer;
					}

					text {
						color: $color-primary;
						cursor: pointer;
					}
				}

				.btnBox {
					height: 50px;
					text-align: center;
					margin: 15px auto;
					color: #fff;
					cursor: pointer;
					border-radius: 5px;
					font-size: 16px;
					background: $color-primary;
					width: 400px;
					@extend %flex-align-center;
					justify-content: center;
					letter-spacing: 1px;
				}

				.chooseBox {
					@extend %flex-align-center;
					justify-content: space-between;
					color: $color-primary;
					cursor: pointer;
					width: 400px;
				}

				.chooseText {
					font-size: 13px;
					color: #717171;
				}

				.chooseText:hover {
					color: $color-primary;
				}
			}
		}
	}

	.qrcode-wrapper {
		width: 100%;
		.qrcode-wrap {
			width: 290px;
			height: 290px;
			position: relative;
			margin: 30px auto 10px;
			.qrcode {
				width: 100%;
				height: 100%;
			}
		}
		.tips {
			margin-bottom: 10px;
			color: $text-color;
			text-align: center;
		}
	}
	page{
		background: #F5F6FA !important;
	}
</style>